<template>
  <PageWrapper :contentFullHeight="true" v-loading="compState.loadingRef" loading-tip="加载中..." title="无界微前端例子">
    <WujieVue
      width="100%"
      height="100%"
      name="wujie-app01"
      :url="url"
      :sync="false"
      :beforeLoad="beforeLoad"
      :beforeMount="beforeMount"
      :afterMount="afterMount"
      :beforeUnmount="beforeUnmount"
      :afterUnmount="afterUnmount"
      :loadError="loadError"
    />
    <!-- <Loading 
          :loading="compState.loading" 
          :absolute="compState.absolute" :theme="compState.theme" 
          :background="compState.background" :tip="compState.tip" /> -->
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { defineComponent, reactive, watchEffect, computed, ref } from "vue"
  import { Loading, useLoading } from "/@/components/Loading"
  import { PageWrapper } from "/@/components/Page"
  import { useMessage } from "/@/hooks/web/useMessage"
  const { createMessage } = useMessage()

  const [openFullLoading, closeFullLoading] = useLoading({
    tip: "加载中...",
  })

  const compState = reactive({
    absolute: false,
    loading: false,
    // theme: 'dark',
    background: "rgba(111,111,111,.7)",
    tip: "加载中...",
    loadingRef: false,
  })

  const openLoading = (absolute: boolean) => {
    compState.absolute = absolute
    compState.loading = true
    setTimeout(() => {
      compState.loading = false
    }, 2000)
  }

  const url = ref("//192.168.244.1:7500")
  const beforeLoad = (appWindow: Window) => {
    // openFullLoading()
    compState.loadingRef = true
    // openLoading(false)
    console.log("beforeLoad")
  }

  const beforeMount = (appWindow: Window) => {
    console.log("beforeMount")
    compState.loadingRef = false
  }

  const afterMount = (appWindow: Window) => {
    console.log("afterMount")
  }

  const afterUnmount = (appWindow: Window) => {
    console.log("afterUnmount")
  }

  const beforeUnmount = (appWindow: Window) => {
    console.log("beforeUnmount")
  }

  const loadError = (url: string, e: Error) => {
    console.error(url, e)
    // closeFullLoading()
    compState.loadingRef = false
    createMessage.error("加载应用失败")
  }
</script>
